<template>
  <div class="impact-info-container">
    <el-table :data="listData" v-loading="loading">
      <template #empty>
        <Empty/>
      </template>
      <el-table-column
          prop="name"
          label="资产名称"
          width="200px"
      >
      </el-table-column>
      <el-table-column
          prop="type"
          label="事件类型"
          width="400px">
      </el-table-column>
      <el-table-column
          prop="ip"
          label="关联IP">
      </el-table-column>
    </el-table>
    <el-pagination
        :disabled="loading"
        background
        @current-change="currentChangeHandle"
        :current-page="paging"
        :page-size="limit"
        :total="total"
        layout="total, prev, pager, next, jumper"
        style="text-align: right; margin-top: 20px"
    ></el-pagination>
  </div>
</template>

<script>
const mockData = [
  {
    name: '服务器',
    type: '勒索软件',
    ip: '192.168.1.1',
  },
  {
    name: '服务器',
    type: '勒索软件',
    ip: '192.168.1.1',
  },
];
import Empty from "@/components/Empty.vue";

export default {
  name: "ImpactInfo",
  components: {Empty},
  props: {
    viewName: {
      type: String,
      required: true,
    },
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data() {
    return {
      loading: true,
      paging: 1,
      limit: 5,
      total: 0,
      listData: [],
    }
  },
  created() {
    this.initComp();
  },
  methods: {
    initComp() {
      this.getDataList();
    },
    getDataList() {
      const params = {
        startTime: this.datePickerValue[0],
        endTime: this.datePickerValue[1],
        viewName: this.viewName,
        viewType: this.viewType,
        startPosition: this.limit * (this.paging - 1),
        maxResult: this.limit,
      }
      console.log('影响信息获取数据--------', params);
      this.loading = true;
      new Promise((resolve) => {
        setTimeout(() => {
          resolve(true);
        }, 1000)
      }).then(() => {
        this.formatData(mockData)
      })
    },
    formatData(data) {
      this.total = 15;
      this.listData = data;
      this.loading = false;
    },

    // 当前页
    currentChangeHandle(val) {
      this.paging = val;
      this.getDataList();
    },
  }
}
</script>

<style scoped lang="scss">
.impact-info-container {

}
</style>